<template>
<div style="padding-bottom: 44px">
  <div class="center-match-banner"></div>
  <div style="background-color: #fff">
  <ul class="link-tab">
    <router-link tag="li" :to="link.path" v-for="link, index in links" :key="index" active-class="active">{{link.name}}</router-link>
  </ul>
  </div>
    <router-view></router-view>
</div>

</template>
<script>
  export default {
  components: {
  },
    data () {
      return {
        active: 0,
        links: [
          { path: '/about_match/info', name: '关于大赛' },
          { path: '/about_match/question', name: '常见问题' },
          { path: '/about_match/concat', name: '联系我们' },
        ]
      }
    },
    methods: {}
  }
</script>
<style scoped>
  .center-match-banner {
      width: 100%;
      background-image: url(/static/images/about_banner.png);
      background-repeat: no-repeat;
      height: 472px;
      background-size: cover;
      min-width: 1440px;
  }
  .match-title {
    width: 1240px;
    margin: 84px auto 0;
    padding-left: 24px;
    padding-top: 10px;
    background: url(/static/images/match_line.png) no-repeat;
    background-position: right bottom;
    height: 124px;
  }
  .match-card {
    margin: 40px auto 0;
    border-radius: 25px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
    width: 1240px;
    min-height: 406px;
    background-image: url(/static/images/match_card.png);
    background-size: 100% auto;
    background-position: right center;
    padding: 55px 50px;
    font-size: 16px;
    color: #000000;
    line-height: 30px;
  }
  .match-margin-bg {
    background-color: rgb(1, 67, 160);
    width: 100%;
    height: 304px;
    margin: 109px 0 74px;
  }
  .center-match-bg {
    background: url(/static/images/match_bg.png) no-repeat;
    background-position: center 12%;
    background-size: 100% auto;
  }
</style>
